<html>
	<head>
	<meta charset="utf-8">
	<link href="../style/main_table.css" type=text/css rel=stylesheet>
     <script src="../js/vue.min.js"></script>
	 <script src="../js/axios.js"></script>
	 <script src="../js/jquery.js"></script>
    </head>

<body>

        <table width="100%"   border="0"   align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="6"><img src="../images/main_01.gif" width="6" height="6"/></td>
          <td width="981" bgcolor="#A3A3A3"><img src="../images/main_02.gif" width="560" height="6"></td>
          <td width="10"><img src="../images/main_03.gif" width="6" height="6"/></td>
        </tr>
        <tr >
          <td colspan="3"   ><table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1">
              <tr>
                <td background="../images/main_title_bg1.gif"><table width="100%"  border="0" cellspacing="1" cellpadding="1">
                  <tr>
                    <td width="1%"><img src="../images/dot9.gif" width="14" height="14"/></td>
                    <td width="99%">合同信息输入springboot </td>
                  </tr>
                </table></td>
              </tr>
              
              <tr><td align=center height=500>
             
 <!--要有这个挂载点-->
<div id="app2">
<table>

	<tr>
		<td nowrap  height="3" width="76"><strong>基站名称</strong></td>
		<td  nowrap height="3" width="197">
			<input  size="12"   v-model="rt.jzmc"/></td>
		<td  nowrap height="3" width="77"><b>合同</b></td>
		<td  nowrap height="3" width="258">
			<input  size="12" v-model="rt.hetong"/></td>
	</tr>
	<tr>
		<td  nowrap height="34" width="76"><strong><span lang="en-us">&nbsp;&nbsp;&nbsp;
		</span>期别</strong></td>
		<td  nowrap height="34" width="197">
			  <!--这里是qibie_id对应的是合同vo中的qibie_id绑定的也是它-->
		       <select  v-model="rt.qibie_id">  
				<option value="">---请选择---</option> 
			  <!--这里是qibieid对应的是期别vo中的qibieid：因为是从期别的vo中拿json数据-->
	        	<option v-for="option in qibielist" v-bind:value="option.id">
	        	  {{option.name}}
	        	</option>	
			 </select>
			
			
			
			
			
		</td>
		<td  nowrap height="34" width="77"><strong>区域</strong></td>
		<td  nowrap height="34" width="258">
		      <select v-model="rt.quyu_id">
				  <option value="">---请选择---</option> 
                	<option v-for="option in quyulist" v-bind:value="option.id">
                	 {{option.name}}
                	</option>			
              </select>
       </td>

	</tr>
	<tr>
		<td  nowrap height="17" width="76"><strong><span lang="en-us">&nbsp;&nbsp;&nbsp;
		</span>镇区</strong></td>
		<td  nowrap height="17" width="197">
		
		     <select v-model="rt.zhenqu_id">
			<option value="">---请选择---</option> 
			   <option v-for="option in zhenqulist" v-bind:value="option.id">
			    {{option.name}}
			   </option>
			  </select>	
		
	
		</td>
		<td  nowrap height="17" width="77"><strong>面积(M2)</strong></td>
		<td  nowrap height="17" width="258">
			<input  size="12" v-model="rt.mianji"/></td>
	</tr>
	<tr>
		<td  nowrap height="16" width="76"><strong><span lang="en-us">&nbsp;&nbsp;&nbsp;
		</span>地址</strong></td>
		<td nowrap  height="16" width="197">
			<input  size="12" v-model="rt.dizhi"/></td>
		<td nowrap  height="16" width="77"><strong>业主姓名</strong></td>
		<td  nowrap height="16" width="258">
			<input  size="12"  v-model="rt.yzmc"/></td>
	</tr>
	<tr>
		<td  nowrap height="1" width="76"><strong>业主电话</strong></td>
		<td  nowrap height="1" width="197">
			<input  size="12"  v-model="rt.yzdh"/></td>
		<td  nowrap height="1" width="77"></td>
		<td  nowrap height="1" width="258"></td>
	</tr>
	<tr>
		<td   align=center  nowrap height="7" width="608" colspan="4">
		<input type="button" value="提交表单" @click="submitfun()" />
		<input type="button" value="返回主页面" id="goback" name="goback" /> </td>
		

		</tr>
</table>
</div>

        
              
          </table></td>
        </tr>
        <tr>
          <td><img src="../images/main_05.gif" width="6" height="6"/></td>
          <td bgcolor="#A3A3A3"><img src="../images/main_06.gif" width="560" height="6"/></td>
          <td><img src="../images/main_07.gif" width="6" height="6"/></td>
        </tr>
      </table>
</body>
</html>



<script type="text/javascript">
$(function(){
	//返回主页面
	$("#goback").click(function(){
		window.location.href="hetong.html";
	});

});
</script>



<script>
function GetQueryString(name)
{
 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
 if(r!=null)return  unescape(r[2]); return null;
}

var  id=GetQueryString("id");  alert("id=="+id);


        var app1=new Vue({
            el:'#app2',
            data:{
				 qibielist:[],
				 quyulist:[],
				 zhenqulist:[],
				 rt: {id:'',jzmc:'',hetong:'',qibie_id:'',quyu_id:'',zhenqu_id:'',mianji:'',dizhi:'',yzmc:'',yzdh:''},
				 
            },
            
			
			created: function (){
			    this.getqibieList();
			    this.getquyuList();
				this.getzhenquList();
				this.gethetongvo();
			},


            methods: {  
				<!--查询期别数据下拉框显示-->	
				getqibieList:function () {
				  axios.get('http://localhost:8044/test/qibieControl/queryqibie').
					then(function (response){
				        var arr=response.data; //获取后台json数据
				        app1.qibielist=arr; //将json数据赋给vue中变量quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
				<!--查询区域数据下拉框显示-->	
				getquyuList:function () {
				  axios.get('http://localhost:8044/test/quyuControl/queryquyu').
					then(function (response){
				        var arr=response.data; //获取后台json数据
				        app1.quyulist=arr; //将json数据赋给vue中变量quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
				
				
				<!--查询镇区数据下拉框显示-->	
				getzhenquList:function () {
				  axios.get('http://localhost:8044/test/zhenquControl/queryzhenqu').
					then(function (response){
				        var arr=response.data; //获取后台json数据
				        app1.zhenqulist=arr; //将json数据赋给vue中变量quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
				
			<!--查询要修改的数据-->	
			gethetongvo:function () { 
			  axios.get('http://localhost:8044/test/hetongControl/queryvo?id='+id).
				then(function (response){
			        var arr=response.data; //获取后台json数据
			        app1.rt=arr; //将json数据赋给vue中变量hetongvo去显示
			    }).catch(function (error) {
			          alert(error);
			    })
			},
				
				
		         submitfun:function () {
					axios({
					    method: 'POST',
					    url: 'http://localhost:8044/test/hetongControl/updatehetong',
					    params: { //多个字段数据：依次写在下面
						    'id': this.rt.id,
					        'jzmc': this.rt.jzmc,
							'hetong': this.rt.hetong,
							'qibie_id': this.rt.qibie_id,
							'quyu_id': this.rt.quyu_id,
							'zhenqu_id': this.rt.zhenqu_id,
							'mianji': this.rt.mianji,
						    'dizhi': this.rt.dizhi,
						    'yzmc': this.rt.yzmc,
							'yzdh':this.rt.yzdh,
					       	},
					    headers: {
					      'Content-Type': 'application/x-www-form-urlencoded'
					    }
					} ).then(function (response) {
							window.location.href="hetong.html";
						}).catch(function (error) {
						})
				},
	
              }
        });
    </script>

